<!--
 * @Description: 流程任务维护
 * @Author: wangwangwang
 * @Date: 2020-07-23 15:21:24
 * @LastEditors: wangwangwang
 * @LastEditTime: 2021-03-25 12:00:57
--> 
<template>
  <div class="pages_content notice">
    <el-container>
      <el-header>
        <breaDcrumb />
      </el-header>
      <el-main>
        <div class="header_right" @click="showCardNav = !showCardNav">
          <div class="title">搜索</div>
          <div>
            <transition name="from"></transition>
            <span v-show="!showCardNav"><i style="margin-right: 5px;" class="el-icon-arrow-down"></i></span>
            <transition name="to"></transition>
            <span v-show="showCardNav"><i style="margin-right: 5px;" class="el-icon-arrow-up"></i></span>
          </div>
        </div>
        <div v-show="showCardNav" class="hr"></div>
        <el-collapse-transition>
          <div v-show="showCardNav" class="search">
            <el-form :inline="true" :model="tableParam" class="demo-form-inline">
              <el-form-item label="单据编号">
                <el-input v-model="tableParam.code" placeholder="请输入"></el-input>
              </el-form-item>
              <el-form-item label="申请人">
                <el-input v-model="tableParam.name" placeholder="请输入"></el-input>
              </el-form-item>
              <el-form-item label="提交时间">
                <el-date-picker v-model="tableParam.time" style="height:36px" type="datetimerange" unlink-panels align="right" start-placeholder="开始时间" end-placeholder="结束时间" value-format="yyyy-MM-dd HH:mm:ss">
                </el-date-picker>
              </el-form-item>
              <el-form-item>
                <el-button icon="el-icon-search" size="medium" class="bottom_all" @click="(tableParam.page = 1), queryPage()">查 询</el-button>
                <el-button size="medium" class="bottom_all_two" @click="reset()">重 置</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-collapse-transition>
        <div class="hr"></div>
        <div class="card">
          <div class="card_info" :style="style">
            <el-table :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width:100%" :data="tableData" tooltip-effect="dark">
              <el-table-column align="center" type="selection" width="50"></el-table-column>
              <template v-for="(item, index) in table">
                <el-table-column v-if="item.status" :key="index" :fixed="item.label === '操作'?'right':false" :label="item.label" align="center" :width="item.width">
                  <template slot-scope="scope">
                    <el-button v-if="item.label === '操作'" class="bottom_one" size="mini" @click="handleEdit(scope.row)">强制编辑</el-button>
                    <el-button v-if="item.label === '操作'" class="bottom_one" size="mini" @click="handleInterven(scope.row)">强制干预</el-button>
                    <el-button v-if="item.label === '操作'" class="bottom_one" size="mini" @click="handleDelete(scope.row)">强制删除</el-button>
                    <span v-if="item.prop==='taskStatus'">
                      <el-tag v-if='scope.row.taskStatus===1' type="success">保存中</el-tag>
                      <el-tag v-if='scope.row.taskStatus===2' type="info">申请中</el-tag>
                      <el-tag v-if='scope.row.taskStatus===3' type="warning">已结束</el-tag>
                      <el-tag v-if='scope.row.taskStatus===4' type="danger">已撤销</el-tag>
                    </span>
                    <span v-if="item.label !== '操作'&&item.prop !== 'taskStatus'">{{ scope.row[item.prop] }}</span>
                  </template>
                </el-table-column>
              </template>
            </el-table>
          </div>
          <div class="card_bottom">
            <div class="card_bottom_left">
              <div class="top_page_totle">总共{{ total }}条</div>
              <el-pagination :current-page.sync="tableParam.page" :page-size="tableParam.pageSize" layout="prev, pager, next, jumper" :total="total" @current-change="queryPage()"></el-pagination>
            </div>
            <div>
              <el-button size="mini" class="bottom_all_two" icon="el-icon-refresh-right" @click="queryPage()">刷新</el-button>
            </div>
          </div>
        </div>
      </el-main>
    </el-container>
    <Flowbackup :visible="backVisible" :tableData="backTableData" @closeModel="backVisible=false" @hanldeSure='hanldeSure' />
  </div>
</template>

<script>
import breaDcrumb from '@/components/breadcrumb';
import { queryTaskPage, batchDelete } from '@/api/Signed/flows';
import { getNodeList, backPrefixNode } from '@/api/task/flows';
import { mapGetters } from 'vuex';
import Flowbackup from '@/components/WorkFlow/flowbackup';
export default {
  components: {
    breaDcrumb,
    Flowbackup,
  },
  data() {
    return {
      /*判断收起展开*/
      showCardNav: true,
      /*列表展示*/
      table: [
        { label: '名称', width: '400', prop: 'taskName', status: true },
        { label: '编码', width: '200', prop: 'receiptNumber', status: true },
        { label: '任务分类', width: '120', prop: 'taskTypeName', status: true },
        { label: '提交人', width: 'auto', prop: 'createUserName', status: true },
        { label: '提交人机构', width: '150', prop: 'userOrganizationName', status: true },
        { label: '提交人部门', width: '150', prop: 'userDepartmentName', status: true },
        { label: '状态', width: 'auto', prop: 'taskStatus', status: true },
        { label: '提交时间', width: 'auto', prop: 'submissionTime', status: true },
        { label: '计时', width: 'auto', prop: 'timekeeping', status: true },
        { label: '执行人', width: 'auto', prop: 'updateUserName', status: true },
        { label: '执行时间', width: '200', prop: 'updateTime', status: true },
        { label: '操作', width: '330', prop: '', status: true }
      ],
      /*列表选中的数据集*/
      tableParam: {
        page: 1,
        pageSize: 10,
        code: '',
        name: '',
        startTime: '',
        endTime: '',
        time: [],
      },
      total: 0,
      ids: [],
      sortIds: [],
      tableData: [],
      nodeTableData: [],
      backVisible: false,
      backTableData: [],
    };
  },
  mounted() {
    this.queryPage();
  },
  methods: {
    queryPage() {
      if (this.tableParam.time.length) {
        this.tableParam.startTime = this.tableParam.time[0];
        this.tableParam.endTime = this.tableParam.time[1];
      }
      queryTaskPage(this.tableParam).then(res => {
        if (res.code === 1001) {
          this.tableData = res.data.data;
          this.total = res.data.totalRows;
        }
      })
    },
    /*重置*/
    reset() {
      this.tableParam = {
        page: 1,
        pageSize: 10,
        code: '',
        name: '',
        startTime: '',
        endTime: '',
        time: [],
      }
      this.queryPage();
    },
    handleEdit(data) {
      if (data.formType === 1) { // 自定义表单
        const query = {
          processManagerId: data.processManagerId,
          processTaskId: data.id,
          processVersionId: data.versionNumber,
          receiptNumber: data.receiptNumber,
          taskName: data.taskName,
          taskStatus: data.taskStatus,
          createTime: data.createTime,
          createUserName: data.createUserName,
          type: 2,
        }
        this.$router.push({ name: 'taskDetails', query });
        return
      }
      const query = {
        processManagerId: data.processManagerId,
        processTaskId: data.id,
        processVersionId: data.versionNumber,
        receiptNumber: data.receiptNumber,
        dataContent: data.dataContent,
        createTime: data.createTime,
        createUserName: data.createUserName,
        taskName: data.taskName,
        taskStatus: data.taskStatus,
        type: 10,
      }
      this.$router.push({ name: data.dataSource, query });
    },
    handleInterven(data) {
      const params = {
        processManagerId: data.processManagerId,
        processTaskId: data.id,
        processVersionId: data.versionNumber,
        receiptNumber: data.receiptNumber,
      };
      getNodeList(params).then(res => {
        if (res.code === 1001) {
          res.data.pop();
          const newData = [];
          res.data.forEach(item => {
            item.instanceLogsList.forEach(items => {
              const data = {
                nodeName: item.nodeName,
                userName: items.userName,
                multiApprovalType: item.multiApprovalType,
                approvalOptions: items.approvalOptions,
                handlerTime: items.handlerTime,
                approvalStatus: items.approvalStatus || item.approvalStatus,
                processInstanceId: item.processInstanceId,
                id: item.id,
              }
              newData.push(data);
            })
          });
          this.nodeTableData = newData;
          this.backTableData = newData
          this.backVisible = true;
        }
      });
    },
    hanldeSure(data) {
      const newData = this.backTableData.find((item) => item.approvalStatus === 1);
      if (!newData) {
        this.$message.warning('未找到当前审批节点');
        return
      }
      const params = {
        sourceNodeId: newData.id,
        targetNodeId: data.id,
      }
      backPrefixNode(params).then(res => {
        if (res.code === 1001) {
          this.$message.warning('回退成功');
        }
      })
    },
    handleDelete(data) {
      this.$confirm('确定删除此数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        cancelButtonClass: 'bottom_all_two',
        confirmButtonClass: 'bottom_all',
        type: 'warning'
      }).then(() => {
        batchDelete([data.id]).then(res => {
          if (res.code === 1001) {
            this.$message.success('删除成功');
            this.queryPage();
          }
        })
      }).catch(() => {
      });
    },
  },
  computed: {
    ...mapGetters({
      screenWidth: 'getscreenWidth',
      screenHeight: 'getscreenHeight',
      Collapse: 'getsCollapse'
    }),
    style() {
      let num = 0;
      if (this.Collapse) {
        num = this.screenWidth - 124;
      } else {
        num = this.screenWidth - 220;
      }
      return 'width:' + num + 'px;';
    }
  }
};
</script>
<style lang="scss" scoped>
.notice {
  .el-link {
    i {
      font-size: 14px;
      color: $bg_color;
    }
  }
  .el-link:hover {
    color: $bg_color;
  }
  font-size: $font_size;
  .el-main {
    padding: 0;
  }
  .el-main::-webkit-scrollbar {
    width: 3px;
    height: 3px;
  }
  .el-main::-webkit-scrollbar-track {
    background: rgb(239, 239, 239);
    border-radius: 2px;
  }
  .el-main::-webkit-scrollbar-thumb {
    background: #bfbfbf;
    border-radius: 10px;
  }
  .el-main::-webkit-scrollbar-thumb:hover {
    background: #333;
  }
  .el-main::-webkit-scrollbar-corner {
    background: #179a16;
  }
  .search {
    padding: 20px 20px 0;
  }
  .header_right {
    @include discen_al;
    padding: 0 20px;
    justify-content: space-between;
    .title {
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: bold;
    }
  }
  .card_nav {
    padding: 0 20px;
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .card_info {
    padding: 0 20px;
  }
  .card_bottom {
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
    .card_bottom_left {
      display: flex;
      align-items: center;
      font-size: $font_size;
    }
  }
}
</style>